<template>
  <view class="wrap">
    <view class="status"></view>
    <view class="box">
      <view class="item">
        <view class="left">持卡人</view>
        <view class="test">
          <uv-input placeholder="请填写姓名" v-model="opt.name" border="none" placeholderStyle='font-size: 28rpx; color: rgba(0, 0, 0, .27);text-align: right;' font-size="28rpx" color="#000" input-align="right"></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left">开户银行</view>
        <view class="test">
          <uv-input placeholder="请输入开户银行" v-model="opt.bank" border="none" placeholderStyle='font-size: 28rpx; color: rgba(0, 0, 0, .27);text-align: right;' font-size="28rpx" color="#000" input-align="right"></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left">卡号</view>
        <view class="test">
          <uv-input placeholder="请输入银行卡号" type='number' v-model="opt.card_no" border="none" placeholderStyle='font-size: 28rpx; color: rgba(0, 0, 0, .27);text-align: right;' font-size="28rpx" color="#000" input-align="right"></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left">开户预留手机号</view>
        <view class="test">
          <uv-input placeholder="请输入手机号" type='number' v-model="opt.phone" border="none" placeholderStyle='font-size: 28rpx; color: rgba(0, 0, 0, .27);text-align: right;' font-size="28rpx" color="#000" input-align="right"></uv-input>
        </view>
      </view>
      <view class="draw">
        <view class="font">提现金额</view>
        <view class="money">
          <view class="symbol">￥</view>
          <view class="number">
            <uv-input type='number' v-model="opt.money" border="none" font-size="28rpx" color="#000" input-align="right"></uv-input>
          </view>
        </view>
      </view>
      <view class="desc">当前账户可用投研币余额{{ body.coin }}最大可提现金额￥{{ body.money }}</view>
    </view>
    <view class="footer">
      <button class="btn" hover-class="none" @click="keyUp">申请提现</button>
      <view class="rate">申请后，3天内资金到账</view>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { post } from '@/api';
import { toast, mobile, getUser } from '@/common';

let opt = ref({
  name: '',
  bank: '',
  card_no: '',
  phone: '',
  money: ''
})
let body = ref({});

onLoad(() => {
  getData();
})

function keyUp(){
  const value = opt.value;
  if(!value.name) return toast('请输入持卡人姓名');
  if(!value.bank) return toast('请输入开户行');
  if(!value.card_no) return toast('请输入卡号');
  if(!mobile(value.phone)) return toast('请输入正确的手机号');
  if(!uni.$uv.test.number(value.money)) return toast('请输入正确的金额');
  if (value.money < 0) return toast('请输入正确的金额');
  const decimalCount = (value.money.toString().split('.')[1] || []).length;
  if (decimalCount > 2) {
    return toast('金额最多可保留2位小数');
  }
  if(Number(value.money) > Number(body.value.money)) return toast('超过最大可提现金额');

  post('api/recharge_config/userWithdraw', value).then(res => {
    if(res.code == 1){
      toast('操作成功');
      getUser();
      getData();
      uni.navigateBack({
        delta: 1
      });
    }
  })
}

function getData(){
  post('api/recharge_config/getUserWithdrawRatio').then(res => {
    if(res.code == 1){
      const data = res.data;
      body.value = data;
      opt.value.money = data.money;
    }
  })
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 120rpx;
    .rate{
      font-weight: 400;
      font-size: 26rpx;
      color: #000000;
      text-align: center;
      padding-top: 30rpx;
    }
    .btn{
      font-size: 28rpx;
      line-height: 72rpx;
      height: 72rpx;
      width: 374rpx;
      margin: 0 auto;
    }
  }
  .box{
    padding: 0 30rpx;
    padding-top: 25rpx;
    .desc{
      font-weight: 400;
      font-size: 24rpx;
      color: rgba($color: #000, $alpha: .29);
      padding-top: 24rpx;
    }
    .draw{
      padding: 35rpx 0;
      border-bottom: 1px solid rgba($color: #979797, $alpha: .25);
      .money{
        display: flex;
        align-items: center;
        width: 100%;
        padding-top: 30rpx;
        .number{
          flex: 1;
        }
        .symbol{
          font-weight: 400;
          font-size: 36rpx;
          color: #000000;
          width: 50rpx;
          text-align: left;
        }
      }
      .font{
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }
    }
    .item{
      width: 100%;
      padding: 35rpx 0;
      border-bottom: 1px solid rgba($color: #979797, $alpha: .25);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
      }
    }
  }
  .status{
    width: 100%;
    height: 20rpx;
    background-color: #F5F5F5;
  }
</style>